<!-- D:\project\app\ydz-app-uniapp\static\images\forum -->
<template>
	<view class="pagebody bgfff">
		<view class="topbox">
			<view class=" justify-between align-center pos-rel">
				<view class=" flex-row align-center">
					<image @click="backpage" src="@/static/images/login/leftjt.png" alt=""
						style="width: 48rpx;height: 48rpx;"></image>
				</view>
				<view class="flex-row pos-abs" style=" left: 50%; margin-left: -40rpx;">
					<view class="fwbold color303b39"
						style="padding: 0 10rpx; font-size: 36rpx;position: relative;z-index: 66;">
						帖子
					</view>
					<view class="pos-abs"
						style="height: 16rpx;width: 85rpx; background: #00D9B2;border-radius: 8rpx;bottom: 0;">
					</view>
				</view>
				<view @click="release" class="fz28 align-center justify-center"
					style="color: #fff;width: 148rpx;height: 52rpx;background: linear-gradient( 90deg, #43FFDE 0%, #43E859 100%);border-radius: 24rpx;">
					<image src="../../static/images/forum/fly.png"
						style="width: 26rpx;height: 26rpx;margin-right: 8rpx;" mode=""></image> 发布
				</view>
			</view>
		</view>
		<view class="" style="padding: 0 24rpx;">
			<view class="" style="border-bottom: 1rpx solid #D7DDDC;">
				<!-- <uni-easyinput type="textarea" v-model="postform.title" placeholder="请输入自我介绍" /> -->
				<textarea class="color303b39 fz36 fwbold" style="max-height: 119rpx;width: 100%;line-height: 64rpx;"
					maxlength="31" type="text" v-model="postform.title" :placeholderStyle="placeholderStyle"
					placeholder="请输入完整贴子标题(5-31个字)">
					</textarea>
				<!-- 				<view v-show="postform.title.length>0" class="mb30 fz24 justify-end">
					<span style="color: #FC4112;">{{postform.title.length}}</span>/31
				</view> -->
			</view>
			<view class="mt45">
				<textarea maxlength="3000" v-model="postform.content" class="color303b39 fz32"
					style="line-height: 64rpx;width: 100%;max-height: 288rpx;" name="" id=""
					:placeholderStyle="placeholderStyle" placeholder="请输入正文(建议200-2000字)"></textarea>
			</view>
			<view class="mt40" style="padding-bottom: 40rpx; border-bottom: 1rpx solid #D7DDDC;">
				<u-upload :header="headers" :action="action" :file-list="showFilelist" del-bg-color="#303B39"
					@on-remove="removelist" @on-success="uploadlist" @on-change="handleChange"
					:index="'file'"></u-upload>
			</view>
			<view class="mt25" style="height: 80rpx;">
				<view class="justify-start align-center" style="height: 100%;">
					<view :class="isnav==index?'isnav':''" class="align-center pos-rel color303b39 fz32 mr30"
						@click="isnav = index" style="height: 100%;" v-for="(item,index) in navlist" :key="index">
						{{item}}
						<view class="pos-abs" v-show="isnav==index"
							style="bottom: 0;left: 0;right:0;margin: auto;width: 64rpx;height: 8rpx;background: #00D9B2;border-radius: 8rpx">
						</view>
					</view>
				</view>
			</view>
			<view class="flex-row flex-wrap" style="padding-top: 16rpx;">
				<view :class="item.dictSort==istype?'ischeck':'nocheck'" @click="checktype(item)"
					v-for="(item,index) in typelist"
					style="border-radius: 48rpx;padding: 16rpx 45rpx;margin: 0 24rpx 24rpx 0;">
					{{item.dictLabel}}
				</view>

			</view>
		</view>

		<u-modal v-model="backshow" :show-cancel-button="true" :confirm-text="'保留'" @confirm="save" @cancel="nosave"
			:cancel-text="'不保留'" :content="backcontent"></u-modal>

		<u-toast ref="uToast" />

	</view>
</template>
<script>
	import {
		getDicts,
		addInvitation
	} from '@/api/api.js'
	import config from '@/config'
	import {
		getToken
	} from '@/utils/auth'
	export default {
		onLoad() {
			getDicts('post_type').then(res => {
				this.typelist = res.data
			})

		},
		data() {
			return {
				maxHeight: '',
				postform: {
					title: '',
					content: '',
					attachFiles: [],
					postType: '',
					diseaseId: '',
					status: 0,
				},
				// 页面展示list
				showFilelist: [],
				placeholderStyle: "color:#7E8987;font-size:32rpx;",
				action: config.baseUrl + '/common/upload',
				headers: {
					authorization: 'Bearer ' + getToken()
				},
				navlist: ['帖子类型'],
				isnav: 0,
				typelist: [],
				istype: 0,
				dislist: [],
				backshow: false,
				backcontent: '是否保留帖子？',
			}
		},
		methods: {
			removelist(index, lists, name) {
				this.postform.attachFiles.splice(index, 1)
			},
			uploadlist(data, index, lists, name) {
				let fileobj = {
					url: data.url,
					fileName: data.fileName
				}
				this.postform.attachFiles.push(fileobj)
			},

			backpage() {
				if (this.postform.title == '' && this.postform.content == '' && this.postform.postType == '' && this
					.postform.diseaseId == '' && this.postform.attachFiles.length == 0) {
					uni.navigateBack({
						delta: 1
					});
				} else {
					this.backshow = true
				}
			},
			checktype(item) {
				this.istype = item.dictSort;
				this.postform.postType = item.dictValue;
			},
			release() {
				if (this.postform.title.length == 0) {
					this.$refs.uToast.show({
						title: '请填写标题',
						type: 'error',
					})
					return
				} else if (this.postform.content.length == 0) {
					this.$refs.uToast.show({
						title: '请填写内容',
						type: 'error',
					})
					return
				} else if (this.postform.postType.length == 0) {
					this.$refs.uToast.show({
						title: '请选择帖子类型',
						type: 'error',
					})
					return
				} else {
					this.postform.status = 1

					addInvitation(this.postform).then(res => {
						this.$refs.uToast.show({
							title: res.msg,
							url: '/pages/forum/forumhome'
						})
					})
				}

			},
			save() {
				addInvitation(this.postform).then(res => {
					this.$refs.uToast.show({
						title: '帖子已保存至草稿箱',
						type: 'success',
						url: '/pages/forum/forumhome'
					})
				})

			},
			nosave() {
				uni.navigateBack({
					delta: 1
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #fff;
	}

	.pagebody {
		.topbox {
			height: 128rpx;
			background: linear-gradient(180deg, rgba(0, 217, 178, 0.2) 0%, rgba(0, 217, 178, 0) 100%);
			padding: 20rpx 24rpx;
		}

		.isnav {
			font-weight: bold;
		}

		.ischeck {
			color: #00977C;
			background: linear-gradient(125deg, #F5FEFC 0%, #E7FCF8 100%);
		}

		.nocheck {
			background: #F4F8F8;
			color: #303B39;
		}
	}
</style>